import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'
import { Message } from 'element-ui'
import axios from '@/http/req'
import url from '@/config/url'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    // 重定向
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/register',
    component: () => import('@/views/Register.vue')
  },
  {
    path: '/admin',
    name: 'admin',
    component: () => import('@/views/Admin.vue'),
    // redirect: '/admin/dashboard',
    meta: {
      isLogin: true
    }
    // 路由独享守卫
    // beforeEnter(to, form, next) {
    // to去往的路由,from来源路由 next放行函数 跳转
    // console.log(to)
    // console.log(from)
    //   if (!localStorage.getItem('username') || !localStorage.getItem('token')) {
    //     // 不允许进入到后台管理界面  跳转到登录页面
    //     Message({
    //       message: '请先登录!',
    //       type: 'warning',
    //       duration: 1000,
    //       onClose: () => {
    //         next('/login')
    //       }
    //     })
    //   } else {
    //     // 即使有token,也需要请求服务器 验证其有效性
    //     axios.get(url.profile).then((res) => {
    //       if (res.data.code === 401) {
    //         Message({
    //           message: '请先登录!',
    //           type: 'warning',
    //           duration: 1000,
    //           onClose: () => {
    //             next('/login')
    //           }
    //         })
    //       } else {
    //         // token有效放行
    //         next()
    //       }
    //     })
    //   }
    // },
    // children: [
    //   {
    //     // 子路由配置时 是从上级路由开始的 不要写/ 代表从根路径开始
    //     path: 'dashboard',
    //     component: () => import('@/views/Admin/Dashboard.vue'),
    //     meta: {
    //       isLogin: true
    //     }
    //   },
    //   {
    //     path: 'user',
    //     component: () => import('@/views/Admin/User.vue'),
    //     meta: {
    //       isLogin: true
    //     }
    //   },
    //   {
    //     path: 'goods',
    //     component: () => import('@/views/Admin/Goods.vue'),
    //     meta: {
    //       isLogin: true
    //     }
    //   },
    //   {
    //     path: 'permission',
    //     component: () => import('@/views/Admin/Permission.vue'),
    //     meta: {
    //       isLogin: true
    //     }
    //   }
    // ]
  },
  // 404路由处理
  {
    path: '*',
    component: () => import('@/views/NotFound.vue')
  }
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () =>
  //     import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 需要根据用户权限动态添加的路由信息
const routerList = [
  {
    path: 'dashboard',
    component: () =>
      import(/* webpackChunkName: "dashboard" */ '@/views/Admin/Dashboard.vue'),
    meta: {
      isLogin: true
    }
  },
  {
    path: 'banner',
    component: () => import('@/views/Admin/Banner.vue'),
    meta: {
      isLogin: true
    }
  },
  {
    path: 'user',
    component: () => import('@/views/Admin/User.vue'),
    meta: {
      isLogin: true
    }
  },
  {
    path: 'goods',
    component: () => import('@/views/Admin/Goods.vue'),
    meta: {
      isLogin: true
    }
  },
  {
    path: 'permission',
    component: () => import('@/views/Admin/Permission.vue'),
    meta: {
      isLogin: true
    }
  }
]
// 动态添加路由
// addRouter(parentName,{path:'',componet:''})
const aclList = JSON.parse(localStorage.getItem('acl'))
if (aclList && aclList.length > 0) {
  // acl的数组长度大于0 代表用户具有权限
  const aclTemp = aclList.map((item) => {
    return item.path.replace('/admin/', '')
  })
  console.log(aclTemp)
  // 遍历路由列表 如果路径信息和acl数组中的信息能够匹配 具有当前路由的权限 就动态添加路由进去
  routerList.forEach((item) => {
    // item 路由列表中待添加的路由信息
    if (aclTemp.includes(item.path)) {
      // 动态添加路由信息
      router.addRoute('admin', item)
    }
  })
}
// 全局路由守卫
router.beforeEach((to, form, next) => {
  // console.log(to)
  // 可以结合meta路由元信息 进行判断
  // if (to.path === '/login' || to.path === '/register') {
  if (!to.meta.isLogin) {
    next()
  } else {
    if (!localStorage.getItem('username') || !localStorage.getItem('token')) {
      // 不允许进入到后台管理界面  跳转到登录页面
      Message({
        message: '请先登录!',
        type: 'warning',
        duration: 700,
        onClose: () => {
          next('/login')
        }
      })
    } else {
      // 即使有token,也需要请求服务器 验证其有效性
      axios.get(url.profile).then((res) => {
        if (res.data.code === 401) {
          Message({
            message: '请先登录!',
            type: 'warning',
            duration: 700,
            onClose: () => {
              next('/login')
            }
          })
        } else {
          // 每次获取个人信息校验token 如果token有效 将token和username及其acl存储一下
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('username', res.data.data.username)
          localStorage.setItem('acl', JSON.stringify(res.data.data.acl))
          // token有效放行
          next()
        }
      })
    }
  }
})

export default router
